import { memo } from 'react';
import { Typography, Space, Checkbox } from 'antd';
import type { FC } from 'react';

import {
  QuestionCheckboxPropsType,
  QuestionCheckboxDefaultProps,
  OptionType,
} from './Interface';

const { Paragraph } = Typography;

const QuestionCheckbox: FC<QuestionCheckboxPropsType> = (
  props: QuestionCheckboxPropsType
) => {
  const {
    title,
    isVertical,
    list = [],
  } = {
    ...QuestionCheckboxDefaultProps,
    ...props,
  };
  return (
    <div>
      <Paragraph>{title}</Paragraph>
      <Space direction={isVertical ? 'vertical' : 'horizontal'}>
        {list.map((item: OptionType) => {
          const { text, value, checked } = item;
          return (
            <Checkbox key={value} value={value} checked={checked}>
              {text}
            </Checkbox>
          );
        })}
      </Space>
    </div>
  );
};

export default memo(QuestionCheckbox);
